<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box{
				width:200px;
				height:200px;
				border:1px red solid;
				font-size: 32px; /*字体大小*/
				text-align: center;
			/*	浮动float:right(右浮动)/left(左浮动);/none(没有,默认值,不浮动)*/
			     float:right;
			}
			.box2{
				width:800px;
				height:210px;
				border:1px solid black;
			}
			.clear{
				clear:both;
				
			}
			.bigbox{
				/*overflow: hidden;/*超出部分隐藏*/
			}
			/*清除浮动的第三种方式：添加after伪元素。代表企业网易，淘宝等 */
			.clearfix::after{  /*在clearfix类的后面*/
				content:"";/*内容为空*/
				display: block;/*将伪元素转换为块级盒子*/
				height: 0;/*高度设置为0*/
				clear:both;/*清除两端浮动*/
				visibility:  hidden;/*显示状态 ：隐藏*/
			}
			/*清除浮动的第四种方式：添加双伪元素*/
			.clearfix::after,.clearfix::before{/*在clearfix类前后添加*/
			content:"";
			display: table;
			}
			.clearfix::after{
				clear: both;/*清除两端浮动*/
			}
			
		</style>
	</head>
	<body>
		<!--传统的网页布局：标准流+浮动+定位-->
		<!--浮动 float -->
		<!--快速创建标签：p*3<tab-->
		<!--快速创建类名为box的盒子，标签.box*个数>tab-->
		<!--
		--浮动的特性：
		1.浮动的元素会脱离标准流（脱标）;   解决方法：清除浮动。
		2.浮动的元素一行内显示并且顶部对齐
		3.浮动的元素具有行内快元素类似的特性；
	清除浮动的方法：
	1.额外标签法：隔墙法。即给浮动的盒子后添加一个额外的块级标签；
	             并给标签加入clear:both;(清楚两端浮动)。此方法不常用。
	2.给父级元素添加overflow;hidden属性；
	
		-->
		<!--
		标准流与浮动
		网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；
		标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置**
		-->
		
		<div class="bigbox clearfix">
		<div class="box">1</div>
		<div class="box" style="height:18px;">2</div>
		<div class="box" style="height:240px;">3</div>
		<!--<div class="clear"> </div>-->
		</div>
		
		<div class="box2"> </div>
		
		
	</body>
</html>
